<template>
  <div class="notice-wrap">
    <template v-if="noticeList.length">
      <template v-for="(item, index) in noticeList" :key="index">
        <div style="padding: 0 7px" v-if="index == 0">
          <div class="notice-header" @click="toDialog(item)">
            <div>
              <p class="title-time">{{ renderDate(item.releaseTime, 'YYYY') }}</p>
              <p class="title-time">{{ renderDate(item.releaseTime, 'MM.DD') }}</p>
            </div>
            <div class="line"></div>
            <div>
              <p class="title-white" v-ellTooltip>{{ item.title }}</p>
              <p class="des-white g-ell">{{ item.subtitle }}</p>
            </div>
          </div>
        </div>
        <div class="system-item" v-if="index > 0" @click="toDialog(item)">
          <div class="left">
            <div class="top-tag-wrap" v-if="item.placedTop">
              <CIcon type="c-xian-zhiding" class="icon"></CIcon>
            </div>
            <div class="new-tag" v-if="item.newFlag">NEW</div>
            <span class="left-title" v-ellTooltip> {{ item.title }}</span>
          </div>
          <div class="right">{{ delTime(item.releaseTime) }}</div>
        </div>
      </template>
    </template>
    <div v-else>
      <div class="notice-header" style="cursor: default">
        <div>
          <p class="title-time">{{ year }}</p>
          <p class="title-time">{{ month }}</p>
        </div>
        <div class="line"></div>
        <div>
          <p class="title-white">系统公告</p>
          <p class="des-white">当前暂无系统公告</p>
        </div>
      </div>
      <NoDataBox name="当前暂无系统公告"></NoDataBox>
    </div>
  </div>

  <Preview v-model:visible="dialogVisible" :info="dialogMain"></Preview>
</template>
<script lang="ts" setup>
import { useNotice } from './useNotice';
import Preview from '@/businessComponents/Preview/index.vue';
import dayjs from 'dayjs';
import NoDataBox from '../NoDataBox/index.vue';

const year = dayjs().format('YYYY');
const month = dayjs().format('MM.DD');

const { noticeList, loading, dialogMain, dialogVisible, toDialog } = useNotice();
const renderDate = (time: string, template: string) => {
  return dayjs(time).format(template);
};

const delTime = (dateStr: string) => {
  let arr = dateStr.split(' ');
  if (arr.length) {
    return arr[0];
  }
  return dateStr;
};
</script>
<style lang="scss" scoped>
.notice-wrap {
  width: 100%;
  height: 224px;
  background: linear-gradient(180deg, #d2f6f5 0%, #ffffff 100%);
  border-radius: 6px;
  padding: 15px 8px;
  .notice-header {
    height: 74px;
    width: 100%;
    background: url('~@/assets/images/bg_notice.png') no-repeat;
    background-size: 100% 74px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    cursor: pointer;
    margin-bottom: 11px;
  }
  .title-time {
    font-size: 18px;
    font-family: D-DINExp-Bold, D-DINExp;
    font-weight: bold;
    color: #ffffff;
    line-height: 19px;
  }
  .line {
    width: 1px;
    height: 32px;
    background: #f0f4f7;
    border-radius: 1px;
    opacity: 0.2;
    margin: 0 9px;
  }
  .title-white {
    font-size: 14px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #ffffff;
    line-height: 22px;
  }
  .des-white {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #f8fbfc;
    line-height: 20px;
  }
}
.system-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 36px;
  border-radius: 2px;
  cursor: pointer;
  padding: 0 12px;
  border-radius: 2px;
  &:hover {
    // background: #edf2f7;
    background: #edf2f7;

    .left > .left-title {
      color: #03ac82;
    }
  }
  .left {
    // margin-right: 40px;
    width: calc(100% - 104px);
    display: flex;
    align-items: center;
    .left-title {
      display: inline-block;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #435970;
      line-height: 22px;
      flex: 1;
    }
  }
  .right {
    font-size: 12px;
    font-family: HelveticaNeue;
    color: #7a8a99;
    line-height: 20px;
    width: 72px;
    text-align: right;
  }
  .top-tag-wrap {
    margin-right: 6px;
    width: 16px;
    height: 16px;
    background: #03ac82;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    .icon {
      color: #ffffff;
      font-size: 12px;
    }
  }
  .new-tag {
    width: 36px;
    height: 16px;
    background: linear-gradient(137deg, #ffa753 0%, #ff4829 100%);
    border-radius: 3px;
    line-height: 16px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
    margin-right: 6px;
  }
}
</style>
